// components/project/ProjectFilters.tsx
"use client"

import React from 'react'
import { Search, Filter } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

// 项目状态选项
const PROJECT_STATUS_OPTIONS = [
  { value: "all", label: "所有状态" },
  { value: "进行中", label: "进行中" },
  { value: "已完成", label: "已完成" }
]

interface ProjectFiltersProps {
  searchTerm: string
  statusFilter: string
  onSearchChange: (value: string) => void
  onStatusChange: (value: string) => void
  onSearch: () => void
}

export function ProjectFilters({
  searchTerm,
  statusFilter,
  onSearchChange,
  onStatusChange,
  onSearch
}: ProjectFiltersProps) {
  return (
    <div className="space-y-4">
      {/* 筛选标题 */}
      <div className="flex items-center mb-4">
        <Filter className="w-5 h-5 mr-2" />
        <h3 className="text-lg font-semibold">搜索和筛选</h3>
      </div>

      {/* 筛选控件 */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* 状态筛选 */}
        <div>
          <Select value={statusFilter} onValueChange={onStatusChange}>
            <SelectTrigger>
              <SelectValue placeholder="项目状态" />
            </SelectTrigger>
            <SelectContent>
              {PROJECT_STATUS_OPTIONS.map((status) => (
                <SelectItem key={status.value} value={status.value}>
                  {status.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {/* 搜索框 */}
        <div>
          <div className="flex gap-2">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
              <Input
                placeholder="搜索项目名称、作物类型、地点或负责人..."
                value={searchTerm}
                onChange={(e) => onSearchChange(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && onSearch()}
                className="pl-10"
              />
            </div>
            <Button onClick={onSearch} className="px-4">
              搜索
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}